<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="gui-flex gui-justify-content-center gui-space-between ">
				<view class="title">授权登录</view>
			</view>
			<view class="logo">
				<image src="/static/assets/images/logo/LOGO.jpg" style="width:120px;border-radius: 64rpx;"
					mode="widthFix"></image>
			</view>
		</view>
		<view class="buttom">
			<view class="loginType">
				<view class="gui-flex gui-columns gui-justify-content-center gui-align-items-center">
					<text class="gui-text gui-bold">水鸭子游泳馆</text>
					<view class="gui-margin-top">

					</view>
					<text class="gui-text-small gui-color-grey">申请获取您的公开信息（昵称、头像、手机号等）</text>
					<view class="gui-margin-top">
					</view>
					<view>
						<button style="width:282rpx;" type="default"
							class="gui-button gui-bg-primary gui-noborder gui-border-radius-large"
							open-type="getPhoneNumber" @getphonenumber="getminiprogramcode">
							<text class="gui-icons gui-color-white gui-button-text">登录</text>
						</button>
					</view>
					<view class="gui-margin-top">
						<view style="" type="default" class="gui-color-blue gui-text-small" hover-class="gui-tap"
							@tap="toReg">
							<text class="gui-color-blue gui-button-text gui-text-small">立即注册</text>
						</view>
					</view>
				</view>
			</view>
			<view class="hint">
				登录代表同意
				<text class="link">用户协议、隐私政策，</text>
				并授权使用您的账号信息（如昵称、头像、地理位置信息，手机号）以便您统一管理
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		data() {
			return {
				openid: "",
				unionid:"",
			}
		},
		methods: {
			toReg() {
				uni.navigateTo({
					url: "/subpage/user/register"
				})
			},
			async getminiprogramcode(e) {
				const code = e.detail.code
				wx.login({
					success: async (res) => {
						if (res.code) {
							let data = await request.post("mini/openid", {
								code: res.code
							})
							this.openid=data.openid
							this.unionid=data.unionid

						} else {
							console.log('登录失败！' + res.errMsg);
						}
					}
				})
				
				if (code == null) {
					return uni.showToast({
						icon: "none",
						title: "请请授权手机号"
					})
				}

				const {
					phone
				} = await request.post("mini/phone", {
					code: code,
				})
				if (!phone) {
					uni.showToast({
						title: "获取手机失败,请联系管理员",
						icon: "none"
					})
					return
				}
				uni.showLoading({
					title: '加载中'
				});
				try {
					const {
						data
					} = await request.post("mini/login", {
						mobile: phone,
						openid:this.openid,
						unionid:this.unionid
					})
					uni.hideLoading();
					uni.setStorageSync('token', data.token);
					uni.setStorageSync("user", JSON.stringify(data.user))
					uni.reLaunch({
						url: '/pages/index/index'
					});
				} catch (e) {
					uni.hideLoading();
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		font-size: 28rpx;

		.switch {
			position: absolute;
			right: 40rpx;
			top: 12rpx;
		}

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			.logo {
				display: flex;
				justify-content: center;
				text-align: center;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

		}

		.buttom {
			.loginType {
				display: flex;
				padding: 100rpx 100rpx 100rpx 100rpx;
				justify-content: center;
			}

			.hint {
				margin-top: 140rpx;
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: #909193;

				.link {
					color: #f9ae3d;
				}
			}
		}
	}
</style>